<template>
    <div>
        <div class="top-wrap">
            <header class="jtbsm-m-header">
                <a class="logo clickstat" href="http://jtbsm.live/" eid="click/nav1/icon" eid_desc="点击/列表导航/icon"></a>
                <a class="header-app-btn u-btn-down" eid="click/general/appdl" eid_desc="点击/头部/添加到桌面" @click="addHome()"></a>
                <a class="header-search clickstat" href="javascript:void(0)" eid="click/nav1/search"
                    eid_desc="点击/列表导航/搜索" >
                    <form @submit.prevent="formSubmit" action="javascript:return true">
                        <input type="search" name="hsk" v-model="searchMsg" ref="searchMsg" placeholder="搜游戏/直播/频道" autofocus="autofocus" autocomplete="off"
                        maxlength="50" @keydown="enterKey($event)">
                    <span class="header-search-icon" @click="enterKey('search')"></span> 
                    </form>
                </a>
            </header>

            <div class="header-nav">
                <div class="header-nav-wrap">
                    <div class="header-nav-links header-nav-links1" id="js-nav-link">
                        <div class="nav-links" id="js-game-btns">
                            <a class="nav-link" href="javascript:void(0)" v-for="item in menuList" 
                            @click="isActive(item.pathName,item.id)"
                            v-bind:class="{ on:item.pathName==currentPathName .split('/')[2]|| currentParentPathName.split('/')[2]==item.pathName ||  (currentPathName.split('/')[2]=='home' && item.pathName=='index') }">{{item.className}}</a>

                        </div>
                    </div>

                </div>

                <i class="nav-icon nav-icon-down"></i>
            </div>
            <div class="header-game-box">
                <div class="header-nav">
                    <div class="header-nav-wrap">
                        <div class="header-nav-links header-nav-links2">
                            <div class="nav-links" id="js-game-tab">
                                <a class="nav-link on" data-load="1">热门</a>
                                <a class="nav-link" data-busstype="1" data-load="0">网游</a>
                                <a class="nav-link" data-busstype="2" data-load="0">单机</a>
                                <a class="nav-link" data-busstype="8" data-load="0">娱乐</a>
                                <a class="nav-link" data-busstype="3" data-load="0">手游</a>
                            </div>
                        </div>
                    </div>
                    <i class="nav-icon nav-icon-up"></i>
                </div>
                <div class="header-game-list-wrap">
                    <div class="header-game-list-unit">
                        <ul class="header-game-list clearfix">
                            <li class="header-game-item">
                                <a class="header-game-link" >
                                    <img class="header-game-pic"
                                        data-original="">
                                    <span class="header-game-name">王者荣耀</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="header-game-list-unit" data-busstype="1"></div>
                    <div class="header-game-list-unit" data-busstype="2"></div>
                    <div class="header-game-list-unit" data-busstype="8"></div>
                    <div class="header-game-list-unit" data-busstype="3"></div>
                </div>
            </div>
        </div>
        <div class="v-modal" tabindex="0" style="z-index: 2000;" v-show="dialogVisible">
            <img src="../../../assets/images/addhome.png" @click="dialogVisible=false">

            <div class="v-modal_close" @click="dialogVisible=false">

                <i class="el-icon-close"></i>
            </div>
        </div>

        <div class="m-container">
            <v-banner />
        </div>
    </div>
</template>

<script>

import vBanner from '../../common/mobile/m_banner.vue'
    import { menuData } from '../../../utils/menuConfig.js'
    import $ from 'jquery';
    export default {
        name: 'headers',
        data() {
            return {
                logolink: "",
                menuConfig: [],
                searchMsg: "",
                dialogVisible: false,
                isPC: false,
                menuList: menuData,
                childMenuList: [],
                isShowAuto: false,
                currentPathName: "",//当前选择的父或者子类
                currentParentPathName: "",//当前选择的父类
                currentChildPathName: ""//当前选择的子分类

            }
        },
        components: {
            vBanner
        },
        mounted() {

            window.addEventListener("scroll", this.handleScroll);//滚动监听
            
            this.currentPathName=this.$router.history.current.path;
            
            this.getMenuList(this.currentPathName)

        },

        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                
                this.currentPathName = toRouter.path;

                this.searchMsg = toRouter.query.searchMsg;

            }
        },
        methods: {
            isShowHeight() {
                this.isShowAuto = !this.isShowAuto
            },
            //一级菜单点击事件
            isActive(parentIndex, id, childMenuData) {
                this.currentParentPathName = parentIndex;
                if (this.currentPathName != parentIndex) {

                    if(parentIndex=='index'){
                        parentIndex = 'home';
                    }
                    this.currentPathName = parentIndex;

                    this.$router.push({
                        path: parentIndex,
                    });
                }
                
                if (childMenuData) {
                    this.childMenuList = childMenuData
                }

            },
            //二级菜单点击事件
            childIsActive(parentIndex, id, currentChildPathName) {

                if (this.currentChildPathName != currentChildPathName) {
                    this.currentPathName = parentIndex;
                    this.currentChildPathName = currentChildPathName

                    this.$router.push({
                        path: currentChildPathName,
                    });

                }

            },
		    formSubmit () {
		        return false
		      },
            //回车搜索
            enterKey(ev) {
                if (this.searchMsg == undefined || this.searchMsg == null ||  this.searchMsg === "") {
                    this.$nextTick(() => { //正确写法

                        this.$refs.searchMsg.focus();

                    })

                    return false;
                }
                
                if(ev.keyCode == 13 || ev=="search") {  //键盘回车的编码是13
                    this.$router.push({
                        path: 'search',
                        query: { searchMsg: this.searchMsg },
                    });
                }
            },
            //添加到桌面
            addHome() {
                this.dialogVisible = true
            },
            //获取菜单列表
            getMenuList(currentPathName) {

                // for (let i = 0; i < this.menuList.length; i++) {
                //     if (currentPathName == this.menuList[i].pathName) {
                //         this.currentParentPathName = this.menuList[i].pathName
                //     }
                // }


                this.$axios.post('/api/projectApi/getCategory').then((res) => {
                    if (res.data.code == "0") {
                        this.menuList = res.data.data;

                        for(let i=0;i<this.menuList.length;i++){
                            if(currentPathName==this.menuList[i].pathName){
                                this.currentParentPathName=this.menuList[i].pathName
                            }
                        }
                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {

                }).then(() => {

                }, (err) => {

                })
            },
            //获取当前子菜单
            getcurrentChildPathNameMenu(menuList, currentPathName, id) {
                var childMenuList1 = []
                for (let j = 0; j < menuList.length; j++) {
                    if (menuList[j].classNameID == id || menuList[j].pathName == currentPathName) {
                        childMenuList1.push({
                            OPID: menuList[j].OPID,
                            OPName: menuList[j].OPName,
                            className: menuList[j].className,
                            classNameID: menuList[j].classNameID,
                            createTime: menuList[j].createTime,
                            id: menuList[j].id,
                            pathName: menuList[j].pathName,
                            parentIndex: currentPathName
                        })
                    }
                }

                return childMenuList1;
            },
            handleScroll() {

                var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
                var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
                var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
                if ((scr + clientHeight + 10) > 10) {
                    $(".jtbsm2-header.jtbsm2-header-style-skr").css({ position: "fixed", "background": "linear-gradient(177deg, rgb(255, 129, 45) 0%, rgb(224, 32, 32) 100%)" })

                }
                else {
                    $(".jtbsm2-header.jtbsm2-header-style-skr").css({ position: "absolute", "background": "none" })
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .v-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 1.5;
        background: #000;

        img {
            width: 100%;
        }
    }

    .v-modal_close {
        position: absolute;
        top: 1%;
        right: 2%;
        z-index: 2001;
        font-size: 35px;
        color: #999;
    }
    .m-container{
        padding-bottom: 0px;
    }
</style>